<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品操作</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;">
    <!--<div style="padding: 20px; background-color: #ffffff;">-->
    <!--顶部-->
    <div class="layui-card layui-col-md1" style="border: 0px;background-color: #F2F2F2;">
        <div class="layui-card-header" style="border: 0px;background-color: #F2F2F2;">
            <!--<button style="padding: 10px"><a href="/goodsJump/type">返回列表</a></button>-->
            <button class="goodsBuy option layui-btn layui-btn-radius layui-btn-normal" lay-filter="option"><a
                    href="/goodsJump/type">返回列表</a></button>
        </div>
    </div>
    <div class="layui-row layui-col-space15" style="border: 0px;background-color: #F2F2F2;">
        <!--左-->
        <div class="layui-col-md6" style="border: 0px;background-color: #F2F2F2;">
            <div class="layui-card" style="border: 0px">
                <div class="layui-card-header goodsDetail" style="font-size: 22px">商品详情</div>
                <div class="layui-card-body goodsOption" style="font-size: 15px"></div>
            </div>
        </div>
        <!--右-->
        <div class="layui-col-md6" style="border: 0px;background-color: #F2F2F2;">
            <div class="layui-card" style="border: 0px">
                <div class="layui-card-header goodsHead" style="font-size: 22px;border: 0px"></div>
                <div class="layui-card-body goodsHtml" style="border: 0px">

                </div>
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.all.js"></script>
<script>
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var id = localStorage.getItem("id");
        $.ajax({
            url: "/goods/getGoods",
            method: "POST",
            data: {
                "id": id
            },
            success: function (data) {
                $(".goodsOption").html(loadGoodsDetail(data.data[0]))
                clickOption(data.data[0]);

            }
        })

        /**
         * 加载商品详情
         */
        function loadGoodsDetail(goods) {
            return '<img src="' + goods.goods_image + '" alt="商品图片"><br>' +
                ' <span class="goodsName">品名:' + goods.goods_name + '</span><br>' +
                ' <span class="goodsName">价格:' + goods.goods_price + '</span><br>' +
                '<span class="goodsColor">颜色:' + goods.goods_color + '</span><br>' +
                ' <span class="goodsUseMethod">用法:' + goods.useMethod + '</span><br>' +
                ' <span class="goodsRemark">说明:' + goods.remark + '</span><br><br>' +
                ' <button class="goodsBuy option layui-btn layui-btn-radius layui-btn-normal" lay-filter="option">立即购买</button>' +
                ' <button class="goodsAddCar layui-btn layui-btn-radius option" lay-filter="option">添加购物车</button>' +
                ' <button class="goodsCollect layui-btn layui-btn-radius layui-btn-warm" lay-filter="option">收藏</button>'
        }

        /**
         * 点击商品操作按钮事件(添加购物车,购买等)
         */
        function clickOption(goods) {
            $(".option").click(function () {
                var option = $(this).html();
                switch (option) {
                    case '收藏':
                        break;
                    case '立即购买':
                        $('.goodsHead').html(option);
                        $('.goodsHtml').html(loadGoodsBuy(goods));
                        element.init();
                        change();
                        form.render();
                        break;
                    case '添加购物车':
                        $('.goodsHead').html(option);
                        $('.goodsHtml').html(loadGoodsCar(goods));
                        element.init();
                        change();
                        form.render();
                        break;
                }
            })
        }

        /**
         * 加载购买商品表单
         * @param goods
         * @returns {string}
         */
        function loadGoodsBuy(goods) {
            return '<div class="layui-form my_form_style" id="update" action="" lay-filter="example">' +
                '    <div class="layui-form-item">' +
                '        <div class="layui-input-block">' +
                '            <input type="hidden" id="goodsId" name="goods_id" lay-verify="required"' +
                '                   value="' + id + '"' +
                '                   class="layui-input">' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <label class="layui-form-label">商品名称：</label>' +
                '        <div class="layui-input-block">' +
                '            <input type="text" id="goods_name" name="goods_name" lay-verify="required"' +
                '                   value="' + goods.goods_name + '" readonly' +
                '                   placeholder="请输入商品名称"' +
                '                   class="layui-input">' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <label class="layui-form-label">单价：</label>' +
                '        <div class="layui-input-block">' +
                '            <input type="number" id="goods_price" lay-verify="required" name="goods_price"' +
                '                   placeholder="请输入单价" value="' + goods.goods_price + '"' +
                '                   class="layui-input" readonly>' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <label class="layui-form-label">购买数量：</label>' +
                '        <div class="layui-input-block">' +
                '            <input type="number" id="goods_count" lay-verify="required" name="goods_count"' +
                '                   placeholder="购买数量"' +
                '                   class="layui-input goods_count">' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <label class="layui-form-label">商品金额：</label>' +
                '        <div class="layui-input-block">' +
                '            <input type="number" id="order_price" lay-verify="required" name="order_price" readonly' +
                '                   class="layui-input" placeholder="请输入总金额">' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <label class="layui-form-label">配送方式：</label>' +
                '        <div class="layui-input-block">' +
                '            <select id="mode_distribution" name="mode_distribution" lay-filter="aihao">' +
                '                <option value=""></option>' +
                '                <option value="线上配送">线上配送</option>' +
                '                <option selected="selected" value="到店取货">到店取货</option>' +
                '            </select>' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <label class="layui-form-label">联系电话：</label>' +
                '        <div class="layui-input-block">' +
                '            <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off"' +
                '                   class="layui-input" placeholder="请输入联系电话">' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <label class="layui-form-label">地址：</label>' +
                '        <div class="layui-input-block">' +
                '            <input type="tel" readonly="readonly" name="address" lay-verify="" autocomplete="off" id="address"' +
                '                   class="layui-input address"  placeholder="请点击添加地址填写配送地址">' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <div class="layui-input-block layui-col-md1">' +
                '            <button id="addAddress" class="addAddress layui-btn layui-btn-radius" lay-submit lay-filter="addAddress">添加地址</button>' +
                '        </div>' +
                '        <div class="layui-input-block layui-col-md1">' +
                '            <button class="goodsBuy option layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="addOrder">提交订单</button>' +
                '        </div>' +
                '    </div>' +
                '</div>'
        }

        /**
         * 加载添加购物车表单
         * @param goods
         * @returns {string}
         */
        function loadGoodsCar(goods) {
            return '<div class="layui-form my_form_style" id="update" action="" lay-filter="example">' +
                '    <div class="layui-form-item">' +
                '        <div class="layui-input-block">' +
                '            <input type="hidden" id="goodsId" name="goods_id" lay-verify="required"' +
                '                   value="' + id + '"' +
                '                   class="layui-input">' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <label class="layui-form-label">商品名称：</label>' +
                '        <div class="layui-input-block">' +
                '            <input type="text" id="goods_name" name="goods_name" lay-verify="required"' +
                '                   value="' + goods.goods_name + '" readonly' +
                '                   placeholder="请输入商品名称"' +
                '                   class="layui-input">' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <label class="layui-form-label">添加数量：</label>' +
                '        <div class="layui-input-block">' +
                '            <input type="number" id="goods_count" lay-verify="required" name="goods_count"' +
                '                   placeholder="添加购物车数量"' +
                '                   class="layui-input goods_count">' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <label class="layui-form-label">单价：</label>' +
                '        <div class="layui-input-block">' +
                '            <input type="number" id="goods_price" lay-verify="required" name="goods_price"' +
                '                   placeholder="请输入单价" value="' + goods.goods_price + '"' +
                '                   class="layui-input" readonly>' +
                '        </div>' +
                '    </div>' +
                '    <div class="layui-form-item">' +
                '        <div class="layui-input-block">' +
                '            <button class="goodsBuy option layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="addCar">添加购物车</button>' +
                '        </div>' +
                '    </div>' +
                '</div>'
        }

        form.on('submit(addCar)', function (data) {
            var d = data.field;
            console.log(data.field);
            $.ajax({
                url: "/goodsCar/addCar",
                data: d,
                method: "POST",
                success: function (data) {
                    layer.msg(data.msg, {time: 2 * 1000});
                },
                error: function (data) {
                    layer.msg(data.msg, {time: 2 * 1000});
                }
            })
        })
        form.on('submit(addOrder)', function (data) {
            var d = data.field;
            if ($("#mode_distribution").val() == '线上配送') {
                if ($("#address").val() == '') {
                    layer.msg("线上配送需要输入地址");
                    return;
                }
                d.order_status = 1;
            } else {
                d.order_status = 3;
            }
            console.log(data.field);
            $.ajax({
                url: "/goodsOrder/addOrder",
                data: d,
                method: "POST",
                success: function (data) {
                    layer.msg(data.msg, {time: 2 * 1000});
                },
                error: function (data) {
                    layer.msg(data.msg, {time: 2 * 1000});
                }
            })
        })
        form.on('submit(addAddress)', function (data) {
           layer.open({
                type: 2,
                skin: 'my_popup1',
                area: ['95%', '90%'],
                anim: 2,
                maxmin: true,
                title: "<a>配送地址</a>",
                content: ['/mapJump/searchMap', 'no'],
                //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                end: function () {
                    $('#address').val(localStorage.getItem("address"))
                    localStorage.setItem("address",'')
                }
            });
        })

        /**
         * 购买数量的改变事件
         */
        function change() {
            $('.goods_count').change(function () {
                var goodsCount = $(this).val();
                if (goodsCount < 0) {
                    layer.msg("商品数量应该大于0", {icon: 1});
                    $(this).val("")
                    return;
                }
                var goodsPrice = $("#goods_price").val();
                $("#order_price").val(goodsCount * goodsPrice);
            })
        }
    })
</script>
</body>
</html>